<template>
  <guat-page-layout divide :title="['基本信息', title]">
    <template #actions>
      <guat-button-group
        :buttons="[{ text: '返回', internal: $config.$button.PLO, onClick: $router.back }]"
      />
    </template>
    <template #left>
      <div class="flex flex-col gap-4">
        <a-card :bordered="false">
          <guat-basic-desc :column="1" />
        </a-card>
        <div class="grid grid-cols-2 gap-4">
          <div
            v-for="tab in tabs"
            :class="tabStyle(tab.key)"
            @click="handleClickTab(tab.key, tab.status)"
          >
            <div class="text-base mb-3">{{ tab.label }}</div>
            <div :class="`text-xl font-bold ${tabTextColor(tab)}`">
              {{ tabData[tab.key] + tab.unit }}
            </div>
          </div>
        </div>
      </div>
    </template>
    <template #right>
      <guat-table />
    </template>
    <guat-check-modal title="查看">
      <guat-check-desc :column="1" />
    </guat-check-modal>
  </guat-page-layout>
</template>

<script setup lang="tsx">
import { basicInfoDesc, checkModalDesc } from "../desc-config";
import {
  SignInPropertyMap as SIPM,
  SignInMemberInfo as SIMI,
} from "@/map/attendance/sign-in/property-map";
import { createSignInInfoTableColumns } from "../table";

const activeTab = ref();
const tabData = ref<any>({
  signIn: 10,
  unSignIn: 13,
  leave: 14,
  askForLeave: 3,
  rejectLeave: 5,
});

const tabs = [
  { label: "已签到人数", key: "signIn", status: 0, unit: "人" },
  { label: "未签到人数", key: "unSignIn", status: 1, unit: "人" },
  { label: "请假人数", key: "leave", status: 2, unit: "人" },
  { label: "待批假条", key: "askForLeave", status: 3, unit: "条" },
  { label: "请假已拒绝人数", key: "rejectLeave", status: 4, unit: "人" },
];

const title = computed(() => {
  switch (unref(activeTab)) {
    case "signIn":
      return "已签到成员名单";
    case "unSignIn":
      return "未签到成员名单";
    case "leave":
      return "已请假成员名单";
    case "askForLeave":
      return "请假待批成员名单";
    case "rejectLeave":
      return "请假已拒绝成员名单";
    default:
      return "签到详情";
  }
});

const tableColumns = computed(() => {
  return createSignInInfoTableColumns(activeTab, {
    chk: handleCheck,
    signIn: handleManualSignIn,
    pmt: handlePermit,
    rjt: handleReject,
  });
});

const { info, error } = useModalNotice();
const { success } = useMessage();
const [GuatTable, { setTableData }] = useTable(tableColumns.value);
const [GuatBasicDesc, { setData: setBasicDescData }] = useDescriptions(basicInfoDesc);
const [GuatCheckDesc, { setData: setCheckDescData }] = useDescriptions(checkModalDesc);
const [GuatCheckModal, { setModalVisible }] = useModal();

const tabStyle = (key: number | string) => {
  const style = "rounded p-4 bg-bg-3 cursor-pointer";
  if (unref(activeTab) == key)
    return style.replace("bg-bg-3", "bg-gradient-to-r from-[#3F8CFF] to-[#5A9AF9] text-white");
  return style;
};

const tabTextColor = (tab: (typeof tabs)[number]) => {
  if (unref(activeTab) == tab.key) return "text-white";
  return "text-primary";
};

function handleClickTab(tabKey: string, status: number) {
  if (tabKey == unref(activeTab)) {
    activeTab.value = "";
    // api 请求全部数据
    console.log(status);
  } else {
    activeTab.value = tabKey;
    // api 请求指定状态的数据
    console.log(status);
  }
}

function handleCheck() {
  setModalVisible(true);
}

function handleManualSignIn(member: any) {
  info({
    title: "手动签到确认",
    content: `请确认是否要帮【${member.userName}】手动签到?`,
    onOk: () => success("签到成功"),
  });
}

function handlePermit() {
  info({
    title: "请假批准确认",
    content: `请确认是否批准请假?`,
    onOk: () => success("请假批准成功"),
  });
}

function handleReject() {
  error({
    title: "请假驳回确认",
    content: `请确认是否驳回请假?`,
    onOk: () => success("请假驳回成功"),
  });
}

function aaa() {
  setBasicDescData({
    [SIPM.No]: "1",
    [SIPM.Title]: "标题标题标题",
    [SIPM.CreateTime]: "2023-04-10 18:00:00",
    [SIPM.Creator]: {
      userId: 0,
      userName: "系统创建",
    },
    [SIPM.StartTime]: "2023-04-10 19:00:00",
    [SIPM.EndTime]: "2023-04-10 20:00:00",
    [SIPM.AllowLeave]: true,
    [SIPM.Status]: 1,
  });
}

onMounted(() => {
  setTableData(
    Array.from({ length: 5 }, (_, i) => ({
      [SIMI.Name]: "张三",
      [SIMI.No]: "2020070030506",
      [SIMI.Time]: "2023-04-10 19:00:00",
      [SIMI.Status]: i,
      [SIMI.LeaveTime]: "2023-04-10 19:00:00",
      [SIMI.LeaveReason]: "请假理由",
      [SIMI.Auditor]: {
        userName: "admin",
      },
    }))
  );
  aaa();
  setCheckDescData({
    name: "张三",
    no: "2020070030506",
    status: "已签到",
    time: "2023-04-10 19:00:00",
    images: [
      "https://p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/cd7a1aaea8e1c5e3d26fe2591e561798.png~tplv-uwbnlip3yd-webp.webp",
      "https://p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/6480dbc69be1b5de95010289787d64f1.png~tplv-uwbnlip3yd-webp.webp",
      "https://p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/0265a04fddbd77a19602a15d9d55d797.png~tplv-uwbnlip3yd-webp.webp",
      "https://p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/24e0dd27418d2291b65db1b21aa62254.png~tplv-uwbnlip3yd-webp.webp",
    ],
  });
});
</script>

<style scoped></style>
